<% 
  use crate::templates::components::GithubIcon;
  use crate::templates::components::PostgresLogo;
  use crate::components::navigation::navbar::marketing_link::MarketingLink;
  use crate::components::static_nav_link::StaticNavLink;
  use pgml_components::Component;

  let product_open_source_links = vec![
    StaticNavLink::new("Korvus".to_string(), "https://github.com/postgresml/korvus".to_string()).custom_icon(Component::from(r#"<span class="icon-korvus icomoon" style="width: 16px"></span>"#)),
    StaticNavLink::new("PGML".to_string(), "https://github.com/postgresml/postgresml".to_string()).custom_icon(Component::from(r#"<span class="icon-owl icomoon" style="width: 16px"></span>"#)),
    StaticNavLink::new("PgCat".to_string(), "https://github.com/postgresml/pgcat".to_string()).custom_icon(Component::from(r#"<span class="icon-pgcat icomoon" style="width: 16px"></span>"#)),
  ];

  let product_deployment_options_links = vec![
    StaticNavLink::new("PostgresML Cloud".to_string(), "/docs/cloud/overview".to_string()).icon("filter_drama"),
    StaticNavLink::new("VPC".to_string(), "/docs/cloud/enterprise/vpc".to_string()).icon("vpn_key"),
  ];

  let solutions_use_cases_links = vec![
    StaticNavLink::new("RAG".into(), "/rag".into()).icon("manage_search"),
    StaticNavLink::new("Search".into(), "/docs/open-source/pgml/guides/improve-search-results-with-machine-learning".into()).icon("feature_search"),
    StaticNavLink::new("Chatbot".into(), "/chatbot".into()).icon("smart_toy"),
  ];

  let solutions_tasks_links = vec![
    StaticNavLink::new("LLMs".into(), "/docs/open-source/pgml/guides/llms/".into()).icon("description"),
    StaticNavLink::new("Embeddings".into(), "/docs/open-source/pgml/guides/embeddings/".into()).icon("subtitles"),
    StaticNavLink::new("Vector Database".into(), "/docs/open-source/pgml/guides/vector-database".into()).icon("open_with"),
    StaticNavLink::new("Supervised Learning".into(), "/docs/open-source/pgml/guides/supervised-learning/".into()).icon("model_training"),
  ];

  let company_links = vec![
    StaticNavLink::new("About".to_string(), "/about".to_string()).icon("smart_toy"),
    StaticNavLink::new("Careers".to_string(), "/careers".to_string()).icon("work"),
    StaticNavLink::new("Contact".to_string(), "/contact".to_string()).icon("alternate_email")
  ];

  struct DrawerNav {
    collapse_name: String, 
    links: Vec<Component>,
    to_expand: Vec<String>
  }

  let drawer = |item: DrawerNav| {
    let collapse_name = item.collapse_name;

    let links = item.links.iter().map(|link| {
      link.clone().render_once().unwrap()
    }).collect::<Vec<String>>().join("\n");

    let to_expand = item.to_expand.join(" ");

    format!(r#"
      <div class="nav-item collapse-horizontal {collapse_name} collapse drawer-submenu {to_expand}">
        <ul class="sub-menu-dropdown mb-5 d-flex flex-column gap-3">
          <a class="btn btn-tertiary-web-app" data-bs-toggle="collapse" data-bs-target=".{collapse_name}">
            <span class="material-symbols-outlined icon-back-btn">
              arrow_back
            </span>
            Back
          </a>
          {links}
        </ul>
      </div>
    "#)
  };

  let link_to_drawer = |name: &str, target: &str| {
      format!(r##"
      <li class="nav-item d-flex align-items-center d-flex d-xxl-none">
        <a class="nav-link p-0 fw-semibold" href="#" data-bs-toggle="collapse" data-bs-target=".{target}">{name}</a>
      </li>
      "##)
  };

  let close_mobile_main_nav_items = vec!["solutions-collapse", "company-collapse", "product-collapse"];
%>

  <div class="sticky-top-nav" data-controller="navigation-navbar-marketing">
    <nav class='navbar-marketing-site horizontal navbar-expand-xxl<% if style_alt {%> alt-color<% } %><% if no_transparent_nav { %> no-transparent<% } %>' data-controller='search topnav-styling' data-topnav-styling-alt-styling-value="<%- style_alt %>">
      <div class='container<% if style_alt {%><%- "-fluid p-0" %><%} %> column-gap-4'>
        <div class="controls">
          <%+ PostgresLogo::new("/") %>

          <div class="d-flex flex-row gap-1">
            <li class="nav-item d-flex align-items-center d-block d-xxl-none">
              <button type="text" class="btn nav-link btn-search-input-webapp border-0 p-0" name="search" data-bs-toggle="modal" data-bs-target="#search" autocomplete="off" data-search-target="searchTrigger" data-action="search#openSearch">
                <span class="material-symbols-outlined">search</span>
              </button>
            </li>
  
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
            </button>
          </div>
        </div>

        <div class="navbarSupportedContent underline collapse"></div>

        <div class="collapse navbar-collapse drawer-submenu-container navbarSupportedContent" id="navbarSupportedContent">
          <!-- Main Menu -->
          <div class="nav-item w-100 d-xxl-flex flex-column flex-xxl-row align-items-xxl-center collapse collapse-horizontal drawer-submenu <% for item in close_mobile_main_nav_items {%> <%- item %><% } %> solutions-collapse product-collapse show">
            <ul class="navbar-nav flex-grow-1 gap-4 me-auto my-4 my-xxl-0">

              <% if !standalone_dashboard { %>
                <div class="d-none d-xxl-flex">
                  <%+ MarketingLink::new()
                      .name("Product")
                      .links(product_open_source_links.clone())
                      .title_col1("Open-source")
                      .links_col2(product_deployment_options_links.clone())
                      .title_col2("Deployment options") %>
                </div>
                <%- link_to_drawer("Product", "product-collapse") %>

                <div class="d-none d-xxl-flex">
                  <%+ MarketingLink::new()
                      .name("Solutions")
                      .links(solutions_tasks_links.clone())
                      .title_col1("ml & ai tasks")
                      .links_col2(solutions_use_cases_links.clone())
                      .title_col2("use cases") %>
                </div>
                <%- link_to_drawer("Solutions", "solutions-collapse") %>

                <%+ MarketingLink::new().link(StaticNavLink::new("Pricing".to_string(), "/pricing".to_string())) %>
              <% } %>

              <%+ MarketingLink::new().link(StaticNavLink::new("Docs".to_string(), "/docs".to_string())) %>
              <%+ MarketingLink::new().link(StaticNavLink::new("Blog".to_string(), "/blog".to_string())) %>

              <% if !standalone_dashboard { %>
                <div class="d-none d-xxl-flex">
                  <%+ MarketingLink::new()
                      .name("Company")
                      .links(company_links.clone()) %>
                </div>
                <%- link_to_drawer("Company", "company-collapse") %>
              <% } %>

              <li class="nav-item d-none d-xxl-flex align-items-center">
                <button type="text" class="btn nav-link btn-search-input-webapp border-0 p-0" name="search" data-bs-toggle="modal" data-bs-target="#search" autocomplete="off" data-search-target="searchTrigger" data-action="search#openSearch">
                  <span class="material-symbols-outlined">search</span>
                </button>
              </li>
            </ul>
    
            <ul class="navbar-nav gap-4 mb-2 mb-xxl-0">
              <li class="align-items-center d-none d-xxl-flex">
                <%+ GithubIcon {show_stars: true} %>
              </li>

              <div class="d-block d-xxl-none">
                <%+ MarketingLink::new().link(StaticNavLink::new("GitHub".to_string(), "https://github.com/postgresml/postgresml".to_string())) %>
              </div>


              <div class="mb-5 mt-4 my-xxl-0 d-flex flex-column flex-xxl-row gap-4">
                <% if !standalone_dashboard { %>
                  <% if current_user.as_ref().is_none() || current_user.as_ref().unwrap().id == -1 { %>
                <li class="nav-item d-flex align-items-center">
                  <a class="btn btn-secondary w-100" data-controller="btn-secondary" data-btn-secondary-target="btnSecondary" href="/login">Sign In</a>
                </li>
                <li class="d-flex align-items-center">
                  <a class="btn btn-primary w-100" href="/signup">Start Your Project</a>
                </li>
                  <% } else { %>
                <li class="nav-item d-flex align-items-center">
                  <a class="btn btn-secondary w-100" data-controller="btn-secondary" data-btn-secondary-target="btnSecondary" href="/logout">Sign Out</a>
                </li>
                <li class="d-flex align-items-center">
                  <a class="btn btn-primary w-100" href="/clusters">Console</a>
                </li>
                  <% } %>
                <% } %>

                <% if standalone_dashboard { %>
                <li class="nav-item d-flex align-items-center ">
                  <a class="btn btn-primary w-100" href="/dashboard">Dashboard</a>
                </li>
                <% } %>
              
              </div>
            </ul>
          </div>

          <!-- subnavs for less than large screens -->
          <%- drawer(
            DrawerNav {
              collapse_name: "company-collapse".to_string(),
              links: 
                company_links.iter().map(|link| {
                  MarketingLink::new().link(
                        StaticNavLink::new(link.name.to_string(), link.href.to_string())
                        .disabled(link.disabled))
                        .into()
                }).collect::<Vec<Component>>(),
              to_expand: vec![]
            }
          ) %>

          <%- drawer(
            DrawerNav {
              collapse_name: "solutions-tasks-collapse".to_string(),
              links: 
                solutions_tasks_links.iter().map(|link| {
                  MarketingLink::new().link(
                        StaticNavLink::new(link.name.to_string(), link.href.to_string())
                        .disabled(link.disabled))
                        .into()
                }).collect::<Vec<Component>>(),
              to_expand: vec![]
            }
          ) %>

          <%- drawer(
            DrawerNav {
              collapse_name: "solutions-use-cases-collapse".to_string(),
              links: 
                solutions_use_cases_links.iter().map(|link| {
                  MarketingLink::new().link(
                        StaticNavLink::new(link.name.to_string(), link.href.to_string())
                        .disabled(link.disabled))
                        .into()
                }).collect::<Vec<Component>>(),
              to_expand: vec![]
            }
          ) %>

          <%- drawer(
            DrawerNav {
              collapse_name: "solutions-collapse".to_string(),
              links: 
                vec![
                  Component::from(link_to_drawer("Tasks", "solutions-tasks-collapse")),
                  Component::from(link_to_drawer("Use Cases", "solutions-use-cases-collapse"))
                ],
              to_expand: vec!["solutions-tasks-collapse".to_string(), "solutions-use-cases-collapse".to_string()]
            }
          ) %>

          <%- drawer(
            DrawerNav {
              collapse_name: "product-open-source-collapse".to_string(),
              links: 
                product_open_source_links.iter().map(|link| {
                  MarketingLink::new().link(
                        StaticNavLink::new(link.name.to_string(), link.href.to_string())
                        .disabled(link.disabled))
                        .into()
                }).collect::<Vec<Component>>(),
              to_expand: vec![]
            }
          ) %>

          <%- drawer(
            DrawerNav {
              collapse_name: "product-deployment-options-collapse".to_string(),
              links: 
                product_deployment_options_links.iter().map(|link| {
                  MarketingLink::new().link(
                        StaticNavLink::new(link.name.to_string(), link.href.to_string())
                        .disabled(link.disabled))
                        .into()
                }).collect::<Vec<Component>>(),
              to_expand: vec![]
            }
          ) %>

          <%- drawer(
            DrawerNav {
              collapse_name: "product-collapse".to_string(),
              links: 
                vec![
                  Component::from(link_to_drawer("Open-Source", "product-open-source-collapse")),
                  Component::from(link_to_drawer("Deployment Options", "product-deployment-options-collapse"))
                ],
              to_expand: vec!["product-open-source-collapse".to_string(), "product-deployment-options-collapse".to_string()]
            }
          ) %>

      </div>
    </nav>
  </div>

  <% include!("../../../../../templates/components/search_modal.html");%>
